<template>
  <div class="order">
    <!-- 搜索 -->
    <SearchBlock ref="searchBlockRef" @clickQuery="clickQuery" @reset="reset">
      <template #afterButton>
        <hz-button type="success" @click="clickExport" class="export-btn">导入</hz-button>
        <hz-button type="success" @click="clickExport">导出</hz-button>
      </template>
    </SearchBlock>

    <!-- 表格 -->
    <MainTable
      ref="mainTableRef"
      :tableHeader="tableHeader.list"
      :tableData="tableData.list"
      class="fixed-height"
    >
    </MainTable>
    
    <div class="hx-pagination-box">
      <el-pagination
        v-model:current-page="page.current"
        v-model:page-size="page.size"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="page.sizeChange"
        @current-change="clickQuery"
      />
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, watchEffect } from "vue";
import SearchBlock from "./searchBlock.vue";
import MainTable from "./table.vue";
import { queryOrderList, revokeOrdersByIds, getOrderTableHeader } from "@/api";
import { ElMessage } from "element-plus";

const mainTableRef = ref({});
const searchBlockRef = ref(null);

// 表格数据
const tableData = reactive({
  list: [],
});

// 分页数据
const page = reactive({
  size: 10,
  current: 1,
  total: 0,
  sizeChange: () => {
    page.current = 1;
    clickQuery();
  },
});
// 表头数据
const tableHeader = reactive({
  list: [],
});
let init = false;
watchEffect(() => {
  if (searchBlockRef.value && !init) {
    init = true;
    console.log("clickQuery");
    // clickQuery();
  }
});

// getHeaderList();

// 获取查询条件
function getParam() {
  let cond = searchBlockRef.value.searchCond;
  let data = {
    page: page.current,
    size: page.size,
    params: cond,
  };
  console.log(data);
  return data;
}


// 导出
function clickExport() {

}

// 重置回调
function reset() {
  searchBlockRef.value.clickQuery();
}

// 点击查询
function clickQuery(param) {
  console.log(logObj(param));
  console.log(param.timeBegin);
  return;

  let data = getParam();
  queryOrderList(data).then((res) => {
    console.log(res);
    if (res.records instanceof Array) {
      tableData.list = res.records;
      page.total = res.total;
    } else {
      tableData.list = [];
    }
  });
}

</script>
<style lang="scss" scoped>
.revoke.el-button {
  color: #fff;
}
.export-btn {
  margin-left: 12px;
}

@media screen {
}
</style>
